<template>
  <el-container style="width: 100%">
    <el-header>
      <div style="width: 100%">
        <el-form>
          <el-form-item>
            <el-input
              v-model="search.search"
              :autosize="false"
              :rows="5"
              class="input"
              resize="none"
              type="textarea"
              placeholder="通过crtl+回车换行;回车发送消息"
              @keydown.enter="sendMessage($event)"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-header>
    <el-header v-show="elapsedTime > 0">
      <el-tag type="success">耗时：{{ elapsedTime }}毫秒</el-tag>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        tableName="listCustomColumn"
        :hide-pagination="true"
        :hide-refresh="true"
        :auto-start="false"
        :data="tableData"
        :column="column"
        row-key="id"
        stripe
        v-loading="loading"
      >
        <template #operator="scope">
          <el-button-group>
            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">详情</el-button>
          </el-button-group>
        </template>
      </scTable>
    </el-main>
    <el-dialog v-model="dialogVisible" title="查看" center>
      <v-md-preview :id="vectorDetail.id" :text="vectorDetail.content" @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
    </el-dialog>
  </el-container>
</template>

<script>
import scCron from '@/components/scCron';
import knowledgeUploadFileVue from './knowledgeUploadFile';
import knowledgeDetailVector from './knowledgeDetailVector';
// 预览组件以及样式
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

import '@kangc/v-md-editor/lib/style/preview.css';
// VuePress主题以及样式（这里也可以选择github主题）
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prism
import Prism from 'prismjs';
// 代码高亮
import 'prismjs/components/prism-json';

// 选择使用主题
VMdPreview.use(vuepressTheme, {
  Prism,
});
VMdPreview.use(createCopyCodePlugin());
export default {
  name: 'AIKnowledgenDetailManage',
  components: {
    scCron,
    knowledgeUploadFileVue,
    knowledgeDetailVector,
    VMdPreview,
    vuepressTheme,
  },

  data() {
    return {
      search: {
        search: '',
        wikiId: '',
      },
      tableData: [],
      column: [
        {
          label: '文件名',
          prop: 'fileName',
          width: '150',
        },
        {
          label: '向量值',
          prop: 'content',
          showOverflowTooltip: true,
        },
        {
          label: '相似度',
          prop: 'relevance',
          width: '150',
        },
        {
          label: '操作',
          prop: 'operator',
          width: '150',
        },
      ],
      dialogVisible: false,
      vectorDetail: { id: '', content: '' },
      elapsedTime: 0,
      loading: false,
    };
  },
  async mounted() {},
  methods: {
    handleCopyCodeSuccess(data) {
      var that = this;
      this.$nextTick(() => {
        const textarea = document.createElement('textarea');
        textarea.value = data;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('Copy');
        document.body.removeChild(textarea);
        that.$message.success('已复制到剪切板');
      });
    },
    sendMessage(event) {
      if (event.keyCode == 13) {
        if (!event.ctrlKey) {
          event.preventDefault();
        } else {
          this.search.search += '\n';
          return;
        }
      }

      var aStr = this.search.search;
      var re = /(\n(?=(\n+)))+/g;
      var str = aStr.replace(re, '');
      if (str == '' || str == '\n') {
        this.search.search = '';
        this.$message.warning('请输入对话内容');
        return;
      }
      this.searchHandle();
    },
    setWiki(id) {
      this.$nextTick(() => {
        this.search.wikiId = id;
      });
    },
    async searchHandle() {
      this.loading = true;
      var res = await this.$API.aiWiki.knowledgeVectorSearch.post(this.search);
      if (res.code == 200) {
        this.tableData = res.data.result;
        this.elapsedTime = res.data.elapsedTime;
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
      this.loading = false;
    },
    table_show(row) {
      this.vectorDetail.id = row.documentId;
      this.vectorDetail.content = row.content;
      this.dialogVisible = true;
    },
  },
};
</script>
  <style>
</style>
